import React from 'react'
import {NavLink} from 'react-router-dom'

interface PageNavItemProps {
  to?: string
  name: string
  className?: string
  active?: boolean
  disabled?: boolean
  icon?: React.ReactNode
  onClick?: () => void
  id?: string
}

const PageNavItem: React.FC<PageNavItemProps> = ({
  to,
  name,
  className,
  active,
  disabled,
  icon,
  onClick,
  id,
}): React.ReactElement => {
  const classNameResult =
    'page-nav-item ' +
    (active ? 'active ' : '') +
    (disabled ? 'disabled ' : '') +
    (className ? className : '')

  const renderSelectNavItem = () => {
    if (to) {
      return (
        <NavLink
          draggable={false}
          id={id}
          to={to}
          className={classNameResult}
          onClick={(e: any) => {
            disabled && e.preventDefault()
          }}>
          {icon && icon}
          {name}
        </NavLink>
      )
    } else {
      return (
        <div className={classNameResult} id={id} onClick={onClick}>
          {icon && icon}
          {name}
        </div>
      )
    }
  }

  return <>{renderSelectNavItem()}</>
}

export {PageNavItem}
